<template>
  <div>
    <el-form
      :inline="true"
      :model="searchPostTag"
      class="demo-form-inline"
      style="margin-top: 25px; margin-left: 20%"
    >
      <el-form-item label="话题">
        <el-input
          v-model="searchPost.tag"
          placeholder="请输入帖子话题"
        ></el-input>
      </el-form-item>
      <el-form-item label="帖子标题">
        <el-input
          v-model="searchPost.title"
          placeholder="请输入帖子标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectBoardEssayByTag"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="PostList" border style="width: 100%">
      <el-table-column prop="tag" label="话题" width="150" align="center">
        <template slot-scope="scope">
          <p class="leaveOut">
            {{ scope.row.tag }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="帖子标题" width="200" align="center">
        <template slot-scope="scope">
          <p class="leaveOut">
            {{ scope.row.title }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="发帖人昵称"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="postTime"
        label="发布时间"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="goodCount"
        label="点赞数"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="commentCount"
        label="评论数"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="readCount" label="阅读量" align="center">
      </el-table-column>
      <el-table-column prop="questionType" label="问题贴" align="center">
      </el-table-column>
      <el-table-column label="精华帖" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.topType === 1" style="color: blue">精华帖</div>
          <div v-if="scope.row.topType === 0">普通贴</div>
        </template>
      </el-table-column>
      <el-table-column label="置顶" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.topType === 1" style="color: blue">置顶</div>
          <div v-if="scope.row.topType === 0">未置顶</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="470" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.star === 0"
            icon="el-icon-circle-plus-outline"
            @click="addCream(scope.row.articleId)"
            >加精</el-button
          >
          <el-button
            type="success"
            size="mini"
            v-if="scope.row.star === 1"
            icon="el-icon-remove-outline"
            @click="cancleaddCream(scope.row.articleId)"
            >取消加精</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.topType === 0"
            icon="el-icon-top"
            @click="addUpPost(scope.row.articleId)"
            >置顶</el-button
          >
          <el-button
            type="success"
            size="mini"
            v-if="scope.row.topType === 1"
            icon="el-icon-bottom"
            @click="cancelUpPost(scope.row.articleId)"
            >取消置顶</el-button
          >
          <router-link
            :to="'/lookpost/' + scope.row.articleId"
            style="margin: 0 10px"
          >
            <el-button type="primary" size="mini" icon="el-icon-more"
              >详情
            </el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="withdrawArticle(scope.row.articleId)"
            >撤回</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :total="totalRecords"
      :page-size="limit"
      :page-sizes="[9, 18, 27, 36, 45, 54, 63]"
      style="margin: 30px 0; text-align: center"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="changeCurrentPage"
      @size-change="changeSize"
    />
  </div>
</template>

<script>
import adminControll from "@/api/adminControll";
import forumApi from "@/api/forumApi";
import searchApi from "@/api/searchApi";
export default {
  data() {
    return {
      searchPost: {
        tag: "",
        title: "",
      },
      currentPage: 1,
      limit: 9,
      totalRecords: 100,
      PostList: [
        {
          articleId: "",
          tag: "芬兰",
          title: "什么时候在芬兰演出,好想去啊",
          nickName: "张耀心",
          postTime: "2020 12.01",
          goodCount: 1,
          commentCount: 1,
          readCount: 1,
          questionType: 1,
          state1: 0,
          topType: 0,
        },
      ],
    };
  },

  components: {},

  computed: {},

  created() {
    this.selectBoardEssayByTag();
  },

  methods: {
    //搜索话题广场帖子
    selectBoardEssayByTag() {
      searchApi
        .selectBoardEssayByTag(
          this.searchPost.title,
          this.searchPost.tag,
          0,
          this.currentPage,
          this.limit,
          0
        )
        .then((response) => {
          this.PostList = response.data.records;
          this.totalRecords = response.data.total;
        });
    },
    //加精
    addCream(articleId) {
      this.$alert("是否加精该文章", "加精详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.starArticle(articleId, 1);
          }
        },
      });
    },
    //取消加精
    cancleaddCream(articleId) {
      this.$alert("是否取消加精该文章", "加精详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.starArticle(articleId, 0);
          }
        },
      });
    },
    //置顶文章
    addUpPost(articleId) {
      this.$alert("是否置顶该文章", "置顶详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.topArticle(articleId, 1);
          }
        },
      });
    },
    //取消置顶
    cancelUpPost(articleId) {
      this.$alert("是否取消置顶该文章", "置顶详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.topArticle(articleId, 0);
          }
        },
      });
    },
    changeSize(size) {
      this.limit = size;
      this.selectBoardEssayByTag();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.selectBoardEssayByTag();
    },
    getTeacherList(page = 1) {},
    //撤回文章
    withdrawArticle(articleId) {
      this.$alert("您确定撤回该文章吗", "撤回详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.deleteByArticleId(articleId);
          }
        },
      });
    },
    starArticle(articleId, type) {
      adminControll.starArticle(articleId, type).then((response) => {
        this.selectBoardEssayByTag();
      });
    },
    topArticle(articleId, type) {
      adminControll.topArticle(articleId, type).then((response) => {
        this.selectBoardEssayByTag();
      });
    },
    deleteByArticleId(articleId) {
      adminControll.deleteByArticleId(articleId).then((response) => {
        this.selectBoardEssayByTag();
      });
    },
  },
};
</script>
<style scoped>
img {
  display: block;
  width: 75px;
  height: 75px;
}
.exceed {
  color: red;
}
.leaveOut {
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;

  /* 几行后显示省略号 */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
